<!DOCTYPE html>
<html lang="en">
    <head>
        <title>OpenVidu Speech To Text</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

        <!-- Bootstrap -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous"
        />
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"
        ></script>

        <!-- Font Awesome -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
            integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />

        <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
        <script src="https://cdn.jsdelivr.net/npm/livekit-client@2.5.9/dist/livekit-client.umd.js"></script>
        <script src="app.js"></script>
    </head>

    <body>
        <header>
            <a href="/" title="Home"><h1>OpenVidu Speech To Text</h1></a>
            <div id="links">
                <a
                    href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvdu-agents/openvidu-speech-to-text"
                    title="GitHub Repository"
                    target="_blank"
                >
                    <i class="fa-brands fa-github"></i>
                </a>
                <a
                    href="https://openvidu.io/en/latest/docs/agents/speech-to-text/#tutorial"
                    title="Documentation"
                    target="_blank"
                >
                    <i class="fa-solid fa-book"></i>
                </a>
            </div>
        </header>

        <main>
            <div id="join">
                <div id="join-dialog">
                    <h2>Join a Video Room</h2>
                    <form onsubmit="joinRoom(); return false">
                        <div>
                            <label for="participant-name">Participant</label>
                            <input id="participant-name" class="form-control" type="text" required />
                        </div>
                        <div>
                            <label for="room-name">Room</label>
                            <input id="room-name" class="form-control" type="text" required />
                        </div>
                        <button id="join-button" class="btn btn-lg btn-success" type="submit">Join!</button>
                    </form>
                </div>
            </div>

            <div id="room" hidden>
                <div id="room-header">
                    <h2 id="room-title"></h2>
                    <button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
                </div>
                <div id="layout-container"></div>
                <div id ="transcription-container">
                    <button class="btn btn-primary" id="transcription-button" onclick="toggleTranscription()">
                        Start transcription
                    </button>
                    <textarea id="transcription" class="form-control" rows="8" readonly disabled></textarea>
                </div>
            </div>
        </main>

        <footer>
            <p class="text">Made with love by the <span>OpenVidu Team</span></p>
            <a href="https://openvidu.io/" target="_blank">
                <img id="openvidu-logo" src="images/openvidu_logo.png" alt="OpenVidu logo" />
            </a>
        </footer>
    </body>
</html>
